<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #res{width: 40px;}
    </style>
</head>
<body>
    年：<input type="text" id="year"><br>
    月：<input type="text" id="month"><br>
    日：<input type="text" id="day"><br>
    <input type="button" id="btn" value="计算"><br>
    是这一年的第：<input type="text" id="res" readonly>天
</body>
<script>
    var year = document.getElementById("year");
    var month = document.getElementById("month");
    var day = document.getElementById("day");
    var btn = document.getElementById("btn");
    var res = document.getElementById("res");

    btn.onclick = function(){
        var y = year.value-0;
        var m = month.value-0;
        var d = day.value-0;

        var msg = 0;

        // 2021.1.13 ------- 13
        // 2021.2.13 ------- 31+13
        // 2021.3.13 ------- 31+28+13
        // 2021.4.13 ------- 31+28+31+13
        // 2021.5.13 ------- 31+28+31+30+13
        // ...
        // 2021.12.13 ------ 从1月的天数加到11月的天数+13

        // 在switch中，反向判断从12判断到1，利用cace的穿透和累加功能，节省代码

        switch(m){
            case 12:msg += 30;
            case 11:msg += 31;
            case 10:msg += 30;
            case 9:msg += 31;
            case 8:msg += 31;
            case 7:msg += 30;
            case 6:msg += 31;
            case 5:msg += 30;
            case 4:msg += 31;
            case 3:msg = y%4===0 && y%100!==0 || y%400===0 ? msg + 29 : msg + 28;
            case 2:msg += 31;
            case 1:msg += d;
        }

        res.value = msg;
    }




</script>
</html>